import {TypeCheck} from './common.js'
import D from "./delegator.js"

const Animation_State = Object.freeze({
    READY: -1,
    DOING: 1,
});

const _Animation = Object.freeze({
    Transition: function (target, property, fromValue, toValue, duration, path) {
        if(TypeCheck.IsDomElement(target)) {

            const _oldProperty = D(target).GetStyle('transition');
            D.AddStyle('transition', `${property} ${duration} ${path}`);

            return {
                Forward: function () {
                    if(fromValue.dynamic) {
                        fromValue.value = D(target).GetStyle(property);
                    }
                    D(target).AddStyle(property, toValue.value);
                },
                Backward: function () {
                    if(toValue.dynamic) {
                        toValue.value = D(target).GetStyle(property);
                    }
                    D(target).AddStyle(property, fromValue.value);
                },
                Destory: function () {
                    D(target).AddStyle('transition', _oldProperty);
                }
            }
        }
        return null;
    },

    TransitionLazy: function (target, property, fromValue, toValue, duration, path) {
        if(TypeCheck.IsDomElement(target)) {

            const _trStr = `${property} ${duration} ${path}`;
            let _state = Animation_State.READY;
            const _transitionEndfn = () => {
                target.style.transition = ``;
                _state = Animation_State.READY;
            };
            target.addEventListener("transitionend", _transitionEndfn, true);

            return {
                Forward: function () {
                    if(_state == Animation_State.DOING) return false;
                    if(fromValue.dynamic) {
                        fromValue.value = D(target).GetStyle(property);
                    }
                    D(target).AddStyle('transition', _trStr).AddStyle(property, toValue.value);
                    _state = Animation_State.DOING;
                    return true;
                },
                Backward: function () {
                    if(_state == Animation_State.DOING) return false;
                    if(toValue.dynamic) {
                        toValue.value = D(target).GetStyle(property);
                    }
                    D(target).AddStyle('transition', _trStr).AddStyle(property, fromValue.value);
                    _state = Animation_State.DOING;
                    return true;
                },
                Destory: function () {
                    target.removeEventListener("transitionend", _transitionEndfn, true);
                }
            }
        }
        return null;
    },

    Clip: function (target, duration) {
        if(TypeCheck.IsDomElement(target)) {

            const _kf = new KeyframeEffect(
                target,
                {
                    clipPath: [
                        'polygon(0 100%, 100% 100%, 100% 100%, 0 100%)',
                        'polygon(0 0, 100% 0, 100% 100%, 0 100%)'
                    ],
                    opacity: [0, 1],
                },
                {duration, fill: 'both', direction: 'normal'}
            );
            const _anim = new Animation(_kf, document.timeline);

            return {
                Forward: function () {
                    _anim.playbackRate = 1;
                    _anim.play();
                },
                Backward: function () {
                    _anim.playbackRate = -1;
                    _anim.play();
                },
                Destory: function () {}
            }
        } return null;
    }

});

export default _Animation;
